<template>
  <div class="index">
    <!-- 搜索框 -->
    <div class="search">
      <div @click="toMappage">{{ cityName }}</div>
      <div @click="toSearch">
        <input type="text" placeholder="搜索商品" />
        <span class="icon"></span>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="swiper">
      <slider class="slider swiper-container" :auto-play="false" interval="3000">
        <div class="frame swiper-item" v-for="item in banner" :key="item.id">
          <image :src="item.image_url" class="image slide-image" resize="cover" />
        </div>
        <indicator class="dot-con" item-color="red"></indicator>
      </slider>
    </div>

    <!-- 类型切换 -->
    <div class="channel">
      <div @click="categoryList(item.id)" v-for="(item, index) in channel" :key="index">
        <img class="img" :src="item.icon_url" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>

    <!-- 商品区块 -->
    <div class="brand">
      <div @click="tobrandList" class="head">
        <text style="text-align: center">品牌制造商直供</text>
      </div>
      <div class="content">
        <div @click="branddetail(item.id)" v-for="(item, index) in brandList" :key="index">
          <img class="img" :src="item.new_pic_url" alt="" />

          <div>
            <p>{{ item.name }}</p>
            <p>{{ item.floor_price }}元起</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 新品首发 -->
    <div class="newgoods">
      <div @click="goodsList('new')" class="newgoods-top">
        <div class="top">
          <p>新品首发</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <div class="scroll-view">
            <li v-for="item in newGoods" :key="item.id" @click="goodsDetail(item.id)">
              <img class="img" :src="item.list_pic_url" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.goods_brief }}</p>
              <p>￥{{ item.retail_price }}</p>
            </li>
          </div>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="newgoods hotgoods">
      <div @click="goodsList('hot')" class="newgoods-top">
        <div class="top">
          <p>人气推荐 <span></span> 好物精选</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <div class="scroll-view">
            <li @click="goodsDetail(item.id)" v-for="item in hotGoods" :key="item.id">
              <img class="img" :src="item.list_pic_url" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.goods_brief }}</p>
              <p>￥{{ item.retail_price }}</p>
            </li>
          </div>
        </ul>
      </div>
    </div>

    <!-- 专题精选 -->
    <div class="topicList">
      <div @click="totopic" class="topicList-top">
        <text>专题精选<span class="icon"></span></text>
      </div>
      <div class="list">
        <ul>
          <div class="scroll-view" scroll-direction="horizontal">
            <li @click="topicdetail(item.id)" v-for="(item, index) in topicList" :key="index">
              <img class="img" :src="item.item_pic_url" alt="" />
              <div class="btom">
                <div>
                  <p>{{ item.title }}</p>
                  <p>{{ item.subtitle }}</p>
                </div>
                <div>{{ item.price_info }}元起</div>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </div>

    <!-- 好物 -->
    <div class="newcategory">
      <div class="list" v-for="item in newCategoryList" :key="item.id">
        <div class="head">
          <text style="text-align: center">{{ item.name }}好物</text>
        </div>
        <div class="sublist">
          <div @click="goodsDetail(subitem.id)" v-for="(subitem, subindex) in item.goodsList" :key="subindex">
            <img class="img" :src="subitem.list_pic_url" alt="" />
            <p>{{ subitem.name }}</p>
            <p>￥{{ subitem.retail_price }}</p>
          </div>
          <div @click="categoryList(item.id)">
            <div class="last">
              <p>{{ item.name }}好物</p>
              <span class="icon"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import amapFile from "@/utils/amap-wx";
import { mapState, mapMutations } from 'vuex'
// import data from './data';
export default {
  data() {
    return {
      banner: [],
      channel: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
    }
  },
  computed: {
    ...mapState(['cityName']),
  },
  mounted() {
    this.getCityName()
    this.getData()
  },
  methods: {
    ...mapMutations(['update']),
    toMappage() {
      // var _this = this;
      // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
      // wx.getSetting({
      //   success(res) {
      //     // 如果没有同意授权,打开设置
      //     if (!res.authSetting['scope.userLocation']) {
      //       wx.openSetting({
      //         success: (res) => {
      //           _this.getCityName()
      //         },
      //       })
      //     } else {
      //       this.$router.push({
      //         url: '/pages/mappage/main',
      //       })
      //     }
      //   },
      // })
    },
    toSearch() {
      this.$router.push({
        url: '/pages/search/main',
      })
    },
    async getData() {
      let data = await import('./data.json')

      // try {
      //   data = await this.commonApi({
      //     url: '/index/index',
      //     params: {},
      //     title: '获取主页数据',
      //     method: 'get',
      //   })
      // } catch (err) {
      //   data = await import('./data.json')
      // }
      this.banner = data.banner
      this.channel = data.channel
      this.brandList = data.brandList
      this.newGoods = data.newGoods
      this.hotGoods = data.hotGoods
      this.topicList = data.topicList
      this.newCategoryList = data.newCategoryList
    },
    getCityName() {
      // var _this = this;
      // var myAmapFun = new amapFile.AMapWX({
      //   key: "e545e7f79a643f23aef187add14e4548",
      // });
      // myAmapFun.getRegeo({
      //   success: function (data) {
      //     // 成功回调
      //     console.log(data);
      //     //  data[0].regeocodeData.formatted_address
      //     //  _this.cityName = data[0].regeocodeData.formatted_address;
      //     _this.update({ cityName: data[0].regeocodeData.formatted_address });
      //   },
      //   fail: function (info) {
      //     // 失败回调
      //     console.log(info);
      //     // 如果用户拒绝授权
      //     //  默认为北京
      //     _this.cityName = "北京市";
      //     _this.update({ cityName: "北京市" });
      //   },
      // });
    },

    categoryList(id) {
      this.$router.push({
        path: '/categoryList',
        query: {
          id,
        },
      })
    },
    topicdetail(id) {
      this.$router.push({
        url: '/pages/topicdetail/main?id=' + id,
      })
    },
    branddetail(id) {
      this.$router.push({
        url: '/pages/branddetail/main?id=' + id,
      })
    },
    goodsList(info) {
      if (info === 'hot') {
        this.$router.push({
          url: '/pages/newgoods/main?isHot=' + 1,
        })
      } else {
        this.$router.push({
          url: '/pages/newgoods/main?isNew=' + 1,
        })
      }
    },
    goodsDetail(id) {
      this.$router.push({
        url: '/pages/goods/main?id=' + id,
      })
    },
    totopic() {
      this.$router.push({
        url: '/pages/topic/main',
      })
    },
    tobrandList() {
      this.$router.push({
        url: '/pages/brandlist/main',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
